<template>
  <div :class="[prefixCls, 'min-w-3 max-w-10']" v-if="url">
    <template v-if="imgUrl">
      <ImagePreview v-if="config.preview" :imageList="imgUrl" />
      <img :src="props.url" v-else />
    </template>

    <Icon :icon="icon" :size="32" v-else-if="icon" />
  </div>
  <div class="def-text" v-else>—</div>
</template>

<script lang="ts" setup name="index">
  import { computed } from 'vue';
  import { isUrl, isImgTypeByName } from '/@/utils/is';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { Icon } from '/@/components/Icon';
  import { ImagePreview } from '/@/components/Preview/index';

  const { prefixCls } = useDesign('index');
  const props = defineProps<{
    url?: string;
    config: Indexable;
  }>();

  const imgUrl = computed(() => {
    const src = props.url || '';

    if (isUrl(src) || isImgTypeByName(src)) return [{ src }];
    return false;
  });

  const icon = computed(() => {
    const url = props.url || '';
    if (isUrl(url) || isImgTypeByName(url)) return false;
    return url;
  });
</script>
<style lang="less" scoped>
  .def-text {
    color: @text-color-call-out;
    font-weight: 600;
  }
</style>
